<template xmlns="http://www.w3.org/1999/html">
  <el-row ref="container">
    <el-col :span="4">
      <el-card class="box-card" style="margin: 5px" shadow="hover">
        <div slot="header">
          <span>操作面板</span>
        </div>
        <p class="text-box" title="刷新配置">
          <el-button type="text" @click="reloadConfig">刷新配置</el-button>
        </p>
        <p class="text-box" title="刷新配置">
          <el-button type="text">调整字段</el-button>
        </p>
        <p class="text-box" title="生成代码">
          <el-button type="text">生成代码</el-button>
        </p>
      </el-card>

      <!--代码生成面板-->
      <el-card class="box-card" style="margin: 5px" shadow="hover">
        <div slot="header">
          <span>代码类型</span>
        </div>
        <p v-if="configs" v-for="config in configs" :key="config.id"
           class="text-box" title="生成代码"
           @click="onConfigChange(config)">
          <el-button type="text">{{ config.label }}</el-button>
        </p>
      </el-card>

    </el-col>
    <el-col :span="20" v-loading="loading">
      <el-card class="box-card" style="margin: 5px" :body-style="{'padding': '10px'}" shadow="hover">
        <div slot="header">
          <span>代码 - {{ label }}</span>
          <el-button style="padding: 3px 0" type="text" @click="copy" title="复制当前界面中的代码">复制</el-button>
          <el-button type="text" @click="genCode" class="pull-right" title="重新生成代码"><i
              class="fa fa-refresh"></i> 刷新
          </el-button>
          <sea-clipboard ref="clipboard"></sea-clipboard>
        </div>
        <sea-code :text="code" :type="type" :style="style"></sea-code>
      </el-card>
      <el-card v-show="false" class="box-card" style="margin: 5px" :body-style="{'padding': '10px'}" shadow="hover">
        <div slot="header">
          <span>调整字段映射配置</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
    components: {}
    , name: 'GenerateOperation'
    , data() {
        return {
            // 当前对象
            row_data: undefined
            // 代码名称
            , label: ''
            // 代码框的样式，主要是为了去除滚动条
            , style: ''
            // 代码类型列表
            , configs: []
            // 当前显示的代码
            , code: ''
            // 当前的代码类型
            , type: ''

            // 数据载入中
            , loading: false
            // 当前配置类
            , config: undefined
        }
    }
    , created() {
        this.loadCodeGroup();
    }
    , methods: {
        /**
         * 载入代码分组配置
         */
        loadCodeGroup: function () {
            this.$layers.ajax({
                url: '/db/code/group/list',
                method: 'GET',
                params: {group: 'default'}
            }).then((ret) => {
                if (ret.code === 0) {
                    this.configs = ret.data;
                    this.config = this.configs[0];
                }
            });
        },
        /**
         * 重新载入数据
         */
        reloadConfig: function () {
            // 代码生成请求
            this.$layers.ajax({
                url: '/db/reverse/reload',
                method: 'GET',
                params: {
                    schemaName: this.row_data.schemaName,
                    tableName: this.row_data.tableName
                }
            }).then(ret => {
                if (ret.code === 0) {
                    Layers.succeed('已经重新载入数据！');
                    this.genCode();
                }
            });
        },
        /**
         * 切换操作对象
         *
         * @param row 行级对象
         */
        setRowData: function (row) {
            if (row !== undefined) {
                this.row_data = row;
                // 设置高度
                this.style = 'overflow: auto;height:' + (document.body.clientHeight - 210) + 'px';
                // 生成代码
                this.genCode();
            }
        },

        /**
         * 切换配置
         * @param cfg 代码配置
         */
        onConfigChange: function (cfg) {
            this.config = cfg;
            this.genCode();
        },
        /**
         * 生成代码
         */
        genCode: function () {
            this.loading = true;

            // 记录最后一次选中
            let config = this.config;
            // 代码名称
            this.label = config.label;
            // 代码类型
            this.type = config.codeType;

            // 代码生成所需的参数
            let params = {
                id: config.codeId,
                groupName: config.groupName,
                schemaName: this.row_data.schemaName,
                tableName: this.row_data.tableName
            };
            // 代码生成请求
            this.$layers.ajax({
                url: '/db/reverse/code',
                method: 'GET',
                params: params,
                responseType: 'text'
            }).then((text) => {
                this.loading = false;
                this.code = text;
            }).catch(() => {
                this.loading = false;
            });
        },
        /**
         * 复制页面的代码到剪切板
         */
        copy: function () {
            let config = this.config;

            // 代码生成所需的参数
            let params = {
                id: config.codeId,
                groupName: config.groupName,
                schemaName: this.row_data.schemaName,
                tableName: this.row_data.tableName,
                escape: false
            };
            // 代码生成请求
            this.$layers.ajax({
                url: '/db/reverse/code',
                method: 'GET',
                params: params,
                responseType: 'text'
            }).then((text) => {
                this.$layers.succeed('已复制本页代码，在IDE中粘贴即可！');
                this.$refs.clipboard.copy(text);
            });
        }
    }

}
</script>

